<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1647 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#FFF" d="M107.915-2.712h1420.704q101.479 0 101.479 101.48v811.83q0 101.48-101.48 101.48H107.915q-101.479 0-101.479-101.48V98.768q0-101.48 101.48-101.48Z"/><path fill="#0064A7" d="M1543.384 13.22a80.22 80.22 0 0 1 80.118 80.118v822.436a80.22 80.22 0 0 1-80.118 80.168H102.536a80.22 80.22 0 0 1-80.168-80.168V93.389a80.22 80.22 0 0 1 80.168-80.118h1441m0-15.932h-1441a96.1 96.1 0 0 0-96.1 96.05v822.385a96.1 96.1 0 0 0 96.1 96.405h1441a96.1 96.1 0 0 0 95.847-96.405V93.389a96.1 96.1 0 0 0-95.999-96z"/><path fill="#0064A7" d="M895.188 680.14a289.52 289.52 0 0 0 291.345-276.175A284.547 284.547 0 0 0 895.188 122.97H764.077a274.805 274.805 0 0 0-280.995 280.995A279.067 279.067 0 0 0 764.077 680.14z"/><path fill="#FFF" d="M822.58 551.972V250.224a161.554 161.554 0 0 1 0 301.748m-219.5-150.9a161.96 161.96 0 0 1 103.763-150.848v301.697A161.859 161.859 0 0 1 603.08 401.073m161.655-255.067a255.016 255.016 0 1 0 255.068 255.067 255.067 255.067 0 0 0-255.068-255.067"/><path fill="#1D1D1B" d="M198.18 870.108c0 22.68 16.236 25.37 30.443 25.37a82.046 82.046 0 0 0 84.532-91.89 88.49 88.49 0 0 0-92.193-94.831c-12.127 0-17.658.862-22.985 1.167zm-28.871-138.163c0-26.486-13.801-24.761-27.044-25.015v-7.661c11.467.558 23.239.558 34.756.558 12.38 0 29.176-.558 50.74-.558A107.314 107.314 0 0 1 345.578 802.37c0 29.175-17.1 102.494-121.369 102.494-15.222 0-28.87-.61-42.723-.61s-26.232.305-39.475.61v-7.662c17.658-1.776 26.232-2.385 27.044-22.376zm218.331-6.85a14.46 14.46 0 0 1 0-28.922 14.41 14.41 0 0 1 14.41 14.157 14.714 14.714 0 0 1-14.41 14.714m-31.508 172.514h5.581c8.22 0 14.106 0 14.106-9.742v-79.813c0-12.938-4.415-14.765-15.222-20.6v-4.719c13.852-4.16 30.443-9.742 31.509-10.604a10.503 10.503 0 0 1 5.074-1.472c1.471 0 2.08 1.776 2.08 4.16v113.1c0 9.741 6.495 9.741 14.715 9.741h5.074v7.662c-10.148 0-20.296-.61-30.9-.61s-21.21.305-32.119.61zm90.975-87.982c0-10.909-3.247-13.801-17.048-19.433v-5.581a399.32 399.32 0 0 0 38.866-14.157c.863 0 1.726.61 1.726 2.943v19.18a86.257 86.257 0 0 1 50.993-22.072c25.014 0 33.843 18.266 33.843 41.251v76.11c0 9.741 6.495 9.741 14.714 9.741h5.074v7.662c-10.148 0-20.65-.609-31.204-.609s-21.21.305-31.814.609v-7.662h5.074c8.27 0 14.105 0 14.105-9.742v-76.109c0-16.795-10.147-25.065-27.094-25.065a78.595 78.595 0 0 0-34.199 14.156v86.815c0 9.742 6.495 9.742 14.765 9.742h5.074v7.662c-10.148 0-20.65-.609-31.255-.609s-21.21.305-31.814.609v-7.662h5.074c8.27 0 14.156 0 14.156-9.742zm203.009 4.719c7.357 0 8.22-3.856 8.22-7.357a24.964 24.964 0 0 0-25.624-27.095c-17.961 0-30.443 13.243-33.843 34.452zm-52.16 9.437a71.035 71.035 0 0 0 0 17.1 49.167 49.167 0 0 0 43.28 50.74 56.473 56.473 0 0 0 39.78-19.739l4.11 4.11a69.056 69.056 0 0 1-54.494 33.285 59.162 59.162 0 0 1-56.27-64.236c0-57.741 38.866-74.84 59.467-74.84a46.782 46.782 0 0 1 49.775 46.223 35.771 35.771 0 0 1-.254 5.074l-2.689 1.776zm92.498 73.623h7.966c8.22 0 14.106 0 14.106-9.742v-82.756c0-9.133-10.91-10.909-15.222-13.243V787.2c21.513-9.133 33.285-16.795 35.974-16.795 1.725 0 2.638.863 2.638 3.856v26.486h.61c7.357-11.467 19.737-30.443 37.699-30.443a16.084 16.084 0 0 1 16.794 15.628 14.309 14.309 0 0 1-13.851 15.221c-9.184 0-9.184-7.103-19.484-7.103a24.862 24.862 0 0 0-21.514 24.456v69.158c0 9.742 5.886 9.742 14.156 9.742h16.49v7.662c-16.185-.305-28.515-.61-41.2-.61s-24.456.305-35.06.61v-7.662zm113.403-33.285a38.816 38.816 0 0 0 37.14 35.924 20.803 20.803 0 0 0 23.848-20.905c0-34.756-64.185-23.594-64.185-71.035a40.592 40.592 0 0 1 45.665-37.7 77.428 77.428 0 0 1 33.54 8.575l2.08 30.038h-6.749a30.444 30.444 0 0 0-32.118-29.124 20.702 20.702 0 0 0-22.985 19.433c0 34.503 68.346 23.848 68.346 70.122 0 19.433-15.628 40.084-50.74 40.084a77.48 77.48 0 0 1-35.923-10.148l-3.247-33.894zm350.508-111.373h-7.358a55.813 55.813 0 0 0-63.018-48.304 83.974 83.974 0 0 0-83.111 93.36 95.999 95.999 0 0 0 87.78 102.24 59.923 59.923 0 0 0 59.212-50.739l6.748 1.776-6.748 43.027a165.106 165.106 0 0 1-65.099 15.628 104.828 104.828 0 0 1-112.49-110.764 108.278 108.278 0 0 1 111.628-103.712 212.243 212.243 0 0 1 69.513 15.628zm10.655 144.709h5.581c8.27 0 14.157 0 14.157-9.742v-164.04c0-19.13-4.415-19.738-15.628-22.985v-4.72a186.417 186.417 0 0 0 30.444-12.684 31.053 31.053 0 0 1 6.443-3.247c1.776 0 2.385 1.775 2.385 4.16v203.516c0 9.742 6.495 9.742 14.715 9.742h5.074v7.662c-10.148 0-20.296-.61-30.9-.61s-21.21.305-32.119.61zm188.852-8.626c0 5.074 3.248 5.582 8.22 5.582 3.552 0 7.966-.254 11.772-.254v6.19a300.378 300.378 0 0 0-42.419 9.133l-1.471-.862V884.72a79.458 79.458 0 0 1-52.16 24.761 31.763 31.763 0 0 1-32.372-35.06v-75.45c0-7.662-1.167-15.222-17.657-16.49V776.9c10.604-.305 34.147-2.03 37.953-2.03s3.247 2.03 3.247 8.525v76.109c0 8.828 0 34.198 25.37 34.198a65.961 65.961 0 0 0 35.517-17.962v-79.56c0-5.885-14.156-9.081-24.71-12.024v-5.074c26.486-1.776 43.027-4.11 45.92-4.11s2.384 2.03 2.384 5.074V888.73zm58.858-17.048a31.661 31.661 0 0 0 30.444 30.038c31.509 0 44.752-30.951 44.752-57.184a56.169 56.169 0 0 0-47.086-58.3 45.361 45.361 0 0 0-28.009 13.853zm0-80.118a74.486 74.486 0 0 1 43.89-21.209 57.336 57.336 0 0 1 54.798 61.852 74.384 74.384 0 0 1-70.426 77.174 86.917 86.917 0 0 1-40.947-10.148l-8.829 6.749-6.14-3.248a350.102 350.102 0 0 0 4.11-52.464V723.47c0-19.18-4.413-19.737-15.627-22.985v-4.718a185.605 185.605 0 0 0 30.444-12.685 30.444 30.444 0 0 1 6.494-3.248c1.776 0 2.334 1.776 2.334 4.11z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconDinersclub extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
